<template>
  <div class="Navigate">
    <div class="main" v-if="$route.path!='/home/Singerdetails'&&$route.path!='/home/Songlistdetails'&&$route.path!='/home/Dailyrecommendation'&&$route.path!='/home/Searchpanel'&&$route.path!='/Specialalbum'">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="select">
        <el-menu-item index="1" :class="activeIndex==1?'font':''">个性推荐</el-menu-item>
        <el-menu-item index="2" :class="activeIndex==2?'font':''">专属定制</el-menu-item>
        <el-menu-item index="3" :class="activeIndex==3?'font':''">歌单</el-menu-item>
        <el-menu-item index="4" :class="activeIndex==4?'font':''">排行榜</el-menu-item>
        <el-menu-item index="5" :class="activeIndex==5?'font':''">歌手</el-menu-item>.
        <el-menu-item index="6" :class="activeIndex==6?'font':''">最新音乐</el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
import Bus from '@/components/eventBus'
export default {
  name: 'Navigate',
  data() {
    return {
      activeIndex: '1'
    }
  },
  mounted() {
    this.activeIndex = localStorage.getItem('activeIndex')
  },
  methods: {
    select(e) {
      //点击相应的导航菜单跳转到相应的路由上
      if (e == 1) {
        this.$router.push({ path: '/home/recommend' })
        localStorage.setItem('activeIndex', e)
        this.activeIndex = e
      } else if (e == 2) {
        this.$router.push({ path: '/home/Exclusivecustom' })
        localStorage.setItem('activeIndex', e)
        this.activeIndex = e
      } else if (e == 3) {
        this.$router.push({ path: '/home/Playlist' })
        localStorage.setItem('activeIndex', e)
        this.activeIndex = e
      } else if (e == 4) {
        this.$router.push({ path: '/home/RankingList' })
        localStorage.setItem('activeIndex', e)
        this.activeIndex = e
      } else if (e == 5) {
        this.$router.push({ path: '/home/Singer' })
        localStorage.setItem('activeIndex', e)
        this.activeIndex = e
      } else if (e == 6) {
        this.$router.push({ path: '/home/Latestmusic' })
        localStorage.setItem('activeIndex', e)
        this.activeIndex = e
      }
    }
  },
  created() {
    Bus.$on('Jumpsonglist', val => {
      this.activeIndex = val
    })
    Bus.$on('Atestmusic', val => {
      this.activeIndex = val
    })
    Bus.$on('activeIndex', val => {
      this.activeIndex = val
    })
  }
}
</script>

<style lang="less" scoped>
.Navigate {
  .main {
    width: 1350px;
    background-color: black;
    .font {
      font-size: 20px;
      font-weight: bold;
    }
  }
}
</style>